/**
 * Description
 *
 * Creation Date 27/12/2017
 * @author Candy
 */
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { is, fromJS} from 'immutable';
import { product } from '../api/index';
import { urlConfig } from  '../config/tool';

export default class ProductList extends Component {
	constructor(props) {
		super(props);
		this.state = {
			productList: [],
			noMore: false
		}
	}

	componentDidMount() {
		this.getProductData(this.props);
	}

	getProductData = (props) => {
		product(
			props.keyword,
			props.brandId,
			props.categoryId,
			props.genderId,
			props.sort
		).then(res => {
			this.setState({ productList: res.data, noMore: true})
		})
	}

	componentWillUpdate(nextProps, nextState) {
		if(this.props !== nextProps) {
			this.getProductData(nextProps);
		}
	}

	shouldComponentUpdate(nextProps, nextState) {
		return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state),fromJS(nextState))
	}

	render() {
		return (
			<div className="product-list-container">
				{
					this.state.productList && this.state.productList.length > 0 && this.state.productList.map((item, index) =>
						<Link to={"/product/"+ item.product_id} key={index} className="product-cnt">
							<img src={urlConfig.productBaseUrl + item.product_image} alt="" className="image"/>
							<div className="product-info">
								<p className="name">{item.product_name}</p>
								<p className="price">￥{item.price}</p>
							</div>
						</Link>
					)
				}
				{
					this.state.noMore && (<p className="no-more">没有更多数据了</p>)
				}
			</div>
		)
	}
}
